<style lang="scss">

</style>

<template>
<div class="page-home">
  <z-space vertical>
    <h3>安装</h3>
    <codemirror class="z-code" v-model="codeMan.code" :options="codeMan.cmOptions" />

    <h3>扩展</h3>
    <p>图表依赖echarts5</p>

    <h3>初始化</h3>
    <vue-code-mirror :js="def.js"></vue-code-mirror>

    <p>zform fetch</p>
    <vue-code-mirror :js="def.d2"></vue-code-mirror>

    <h3>链接</h3>
    <p><router-link to="base/formHelper"><el-link type="primary" >FormHelper</el-link></router-link></p>

  </z-space>
</div>
</template>

<script>
import VueCodeMirror from "@example/components/VueCodeMirror";
import {quickBashCode} from "@example/components/CodeMirror";

export default {
  components: {VueCodeMirror},
  setup(props, ctx) {
    let codeMan = quickBashCode(`npm install quill lit echarts  @spectrum-web-components/tabs element-ext pkg-exms -S
    // 2.6版本vue需要
    npm i @vue/composition-api -S
    `);
    let def = {
      js: `
//      所有vue 使用 vue.esm
// import Vue from 'vue' -------> import Vue from 'vue.esm'

globalThis.Req = axios !!!!!!!

import ELEMENT2 from 'element-ext'
Vue.use(ELEMENT2, { size: 'small', zIndex: 3000 });
globalThis.ELEMENT = ELEMENT2

// 引入全局基础库
import 'pkg-exms/lib/initGlo'
// 初始化组件配置
// COMPONENTS [ZCrudDataTable]
import zpkgs, {initZPkgs, COMPONENTS, FormHelper, Mixins} from 'pkg-exms/lib/pkg-exms.common';
import {installExtCom} from 'pkg-exms/lib/com/com.common.js'
import 'pkg-exms/lib/com/com.css'
import {installExtPage} from 'pkg-exms/lib/page/page.common.js'
import 'pkg-exms/lib/page/page.css'
initZPkgs(Vue, function ({initZForm} = {}) {
  initZForm(Vue, Vue, {
    request: {
      ['globalVars']() {
        return {
          userinfo: {
            deptName: '说的是多少111',
            realname: '厕所的看会手机导航'
          }
        }
      }
    }
  })
}, ELEMENT)
      `,
      d2: `
      import {useFetchDataSource} from "pkg-exms/lib/hooks";


  initZForm(Vue, Vue, {
    request: {
      async ['fetch']({apiConfig, type, ctx} = {}) {
        // console.log('fetch', apiConfig, ctx)
        let dataFetchHandle = useFetchDataSource()

        if (type === 'options') {
          // let {config = {}, ui, url} = apiConfig
          // console.log(ui)

          let [reqOption, ajaxOption] = dataFetchHandle.initReq(apiConfig, {
            token: 'TOKEN'
          })

          let res = await dataFetchHandle.req({reqOption, ajaxOption})
          return res
        }
        return Promise.resolve([
        ])
      },
    }
  })


      `
    }
    return {
      def,
      codeMan,
    }
  }
}
</script>
